<template>
  <panel text='电台'>
    <van-button size="mini" slot="right" round>查看更多</van-button>
    <swipe :width="width" :show-indicators='false'>
      <swipe-item v-for="(song, index) of stationList" :key="index" >
        <div class="songs-wrapper">
          <card :image='song.picUrl'
                :key="index"
                class="song"
          >
          <div slot="bottom" class="play">
            <i class="iconfont icon-bofang1"/>
          </div>
          <div class="station-content">
            <span class="title">{{ song.name }}</span>
            <span class="copywriter">{{ song.copywriter }}</span>
          </div>
          </card>
        </div>
      </swipe-item>
    </swipe>
  </panel>
</template>
<script>
import Swipe from 'base/swipe/swipe'
import SwipeItem from 'base/swipe/swipe-item'
import Card from 'base/card'
import Panel from 'base/panel'
import DJProgram from '@/entity/DJProgram'
import { djprogram } from 'api/personalized'

export default {
  components: {
    Card,
    Panel,
    Swipe,
    SwipeItem
  },
  data() {
    return {
      stationList: []
    }
  },
  mounted() {
    this.getStationList()
  },
  computed: {
    width() {
      return window.screen.width * 0.3
    }
  },
  methods: {
    getStationList() {
      djprogram().then(res => {
        const { result = [] } = res
        result.forEach(station => {
          this.stationList.push(new DJProgram(station))
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/mixins.less';
@import '~@/style/variable.less';
.recommendCard{
  /deep/ .column-content{
    text-align: left;
  }
}
.songs-wrapper{
  padding-left: 5px;
  .song{
    margin: 10px 0;
  }
}
.station-content{
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  >span{
    display: block;
    width: 100%;
    .ellipsis();
  }
  .copywriter{
    font-size: @font-size-mini;
  }
}
.play{
  font-size: @font-size-big;
  text-align: right;
  padding-right: 5px;
  i {
    font-size: 1.3em !important;
  }
}
</style>
